<!--
 * @Author: Leo.wang wanglizhigs@163.com
 * @Date: 2024-06-10 22:56:03
 * @LastEditors: Leo.wang wanglizhigs@163.com
 * @LastEditTime: 2024-06-12 23:36:57
 * @FilePath: /chat-ai-plus/src/components/Popup/Popup.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE, 
-->
<template>
  <u-popup :show="true" class="popup" mode="center" >
    <view class="popup-container">
      <u-button class="close-btn" icon="close" @click="handleCancel"></u-button>

      <view class="section pitch_default">
        <view class="row ">
          <u-image class="justify_center" mode="widthFix" width="80px" height="60px" src="/static/images/logo-t@2x.png"></u-image>
        </view>
        <view class="row">
          <u-tag text="自定义工具集"></u-tag>
          <view class="mt_sm">
            你想让ChatSmart知道什么有关你的信息，以便提供更好 的回复？您希望ChatSmart如何回复？
          </view>
        </view>
        <view class="row">
          <u-tag text="模型信息"></u-tag>
          <view class="mt_sm">
            GPT-4浏览、高级数据分析和DALL·E现已内置于GPT-4 拷贝
          </view>
        </view>
      </view>
    </view>
  </u-popup>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import uPopup from 'uview-plus/components/u-popup/u-popup.vue';
import uOverlay from 'uview-plus/components/u-overlay/u-overlay.vue';
import uTransition from 'uview-plus/components/u-transition/u-transition.vue';

export default defineComponent({
  name: 'Popup',
  components: {
    uPopup,
    uOverlay,
    uTransition,
  },
  emits: ['vanish'],
  setup(_, { emit }) {
    const handleCancel = () => {
      emit('vanish');
    };
    return {
      handleCancel,
    };
  },
});
</script>

<style lang="scss" scoped>
@import '@/styles/variables.scss';

.popup-container {
  width: 340px;
  padding: map-get($spaces, lg);
  border-radius: map-get($radii, lg);
  background: url('./static/images/login-bg.png') center center/cover no-repeat;
  background-color: $white-color;
  .image-box {
    padding: $space;
    border-radius: map-get($radii, lg);
    background: $white-color;
  }

  .hint {
    font-size: 12px;
  }

  .close-btn {
    position: absolute;
    top: map-get($spaces, sm);
    right: map-get($spaces, sm);
    width: 50px;
    border: none;
    background: none;
  }
}
</style>
